/* Default light theme */
:root {
  --bg: #DBDBDB;
  --text: #1a1a1a;
  --button: #878787;
}

/* System dark mode preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #ffbf00;
    --button: #755200;
  }
}

/* Manual dark mode override */
[data-theme="dark"] {
    --bg: #1a1a1a;
    --text: #ffbf00;
    --button: #755200;
}

/* Manual light mode override */
[data-theme="light"] {
  --bg: #DBDBDB;
  --text: #1a1a1a;
  --button: #878787;
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mainbody {
  position: absolute;
  top: 15%; 
  width: 100%;
}

a:link {
  color: var(--text);
}

a:visited {
  color: var(--text);
}


.box {
  border: 3px solid var(--text);
  font-family: Courier;
  width: 90%;
  padding: 1% 2%;
  display: inline-block;
}

h1 {
  font-family: Arial;
  text-align: center;
}

h3 {
  font-family: Arial;
  text-align: center;
}

.normal {
  width: 85%;
  padding: 1% 2%;
}


.button {
  position: absolute;
  top: 5%; 
  background-color: var(--button);
  border: 3px solid var(--button);
  color: var(--text);
  padding: 1%;
  width: 10%;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.column {
  columns: 350px 3;
  padding: 10px;
}


 @media screen and (min-width: 601px) {
   
  .mobile-icon {
    display:none !important;
  }
   
 }

 @media screen and (max-width: 600px) {
  .button {
    width: 14%;
  }
  .desktop-icon {
    display: none !important;
  }
 }